<template>
  <div class="min-h-screen bg-gray-100 flex flex-col">
    <!-- Header -->
    <header class="w-full h-16 bg-blue-600 text-white flex justify-center items-center shadow-md fixed top-0 left-0 z-50">
      <h2 class="text-xl font-semibold">我的订单</h2>
    </header>

    <!-- Content -->
    <main class="flex-1 pt-16 px-4 pb-20 space-y-4">
      <div v-if="orders.length > 0" class="space-y-4">
        <div
            v-for="order in orders"
            :key="order.id"
            class="bg-white p-4 rounded-lg shadow-sm border border-gray-200"
        >
          <div class="flex justify-between items-center mb-2">
            <h3 class="font-bold text-base">{{ order.shopName }}</h3>
            <span class="text-sm text-green-600">{{ order.status }}</span>
          </div>
          <ul class="text-sm text-gray-600 space-y-1">
            <li v-for="(item, i) in order.items" :key="i">
              {{ item.name }} x {{ item.quantity }}
            </li>
          </ul>
          <p class="mt-2 text-right text-orange-500 font-medium">
            ￥{{ order.totalPrice.toFixed(2) }}
          </p>
        </div>
      </div>

      <div v-else class="text-center text-gray-500 mt-10">
        <p>暂无订单记录</p>
      </div>
    </main>

    <FooterMenu />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useOrderStore } from '@/stores/user';
import FooterMenu from '@/components/common/FooterMenu.vue';

const orderStore = useOrderStore();

onMounted(() => {
  orderStore.loadOrdersFromLocalStorage();
});

const orders = orderStore.getOrders;
</script>


